<template>
	<div class="content-box">
		<Row>
            <i-col span="24">
                <user-bar></user-bar>
            </i-col>
		</Row>
		<br/>
		<Row  type="flex"  justify="center">
			<i-col span="23">

                <portlet name='数据产品在线查询'>
                <div class="data_body">
                	<i-form :model='formItem'>
                		<div class="data_body_choose">
	                		<Form-item label="请选择查询产品"  :label-width="100">
					            <i-select :model.sync="formItem.select" placeholder="电信二要素比对">
					                <i-option value="PRO_CTCC_IDCARD">电信二要素比对（身份唯一识别码）</i-option>
	                                <i-option value="PRO_CTCC_NAME">电信二要素比对（姓名）</i-option>
	                                <i-option value="PRO_CTCC_THREE">电信三要素比对</i-option>
	                                <i-option value="PRO_CUCC_TWO">联通三要素比对（可二要素）</i-option>
	                                <i-option value="PRO_CMCC_NAME">移动二要素比对（姓名）</i-option>
	                                <i-option value="PRO_CMCC_THREE">移动三要素比对</i-option>
					            </i-select>
	        				</Form-item>
	        			</div>
        				<Row v-if='formItem.select=="PRO_CTCC_IDCARD"'>
        					<i-col :xs="8" :sm="8" :md="7" :lg="5">
	        					<Form-item label="身份证"  :label-width="60">
						            <i-input :value.sync="formItem.ID" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="8" :sm="8" :md="7" :lg="5">
	        					<Form-item label="手机号码"  :label-width="80">
						            <i-input :value.sync="formItem.phone" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="8" :sm="8" :md="7" :lg="4">
						    	<Form-item :label-width="14">
								    <i-button type="primary">查询</i-button>
								</Form-item>
						    </i-col>
        				</Row>
        				<Row v-if='formItem.select=="PRO_CTCC_NAME"'>
        					<i-col :xs="8" :sm="8" :md="7" :lg="5">
	        					<Form-item label="姓名"  :label-width="40">
						            <i-input :value.sync="formItem.name" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="8" :sm="8" :md="7" :lg="5">
	        					<Form-item label="手机号码"  :label-width="80">
						            <i-input :value.sync="formItem.phone" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="8" :sm="8" :md="7" :lg="4">
						    	<Form-item :label-width="14">
								    <i-button type="primary">查询</i-button>
								</Form-item>
						    </i-col>

        				</Row>
        				<Row v-if='formItem.select=="PRO_CTCC_THREE"'>
        					<i-col :xs="7" :sm="7" :md="6" :lg="5">
	        					<Form-item label="姓名"  :label-width="40">
						            <i-input :value.sync="formItem.name" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="7" :sm="7" :md="6" :lg="5">
	        					<Form-item label="手机号码"  :label-width="80">
						            <i-input :value.sync="formItem.phone" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="7" :sm="7" :md="6" :lg="5">
	        					<Form-item label="身份证"  :label-width="80">
						            <i-input :value.sync="formItem.ID" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="3" :sm="3" :md="3" :lg="3">
						    	<Form-item :label-width="14">
								    <i-button type="primary">查询</i-button>
								</Form-item>
						    </i-col>
        				</Row>
        				<Row v-if='formItem.select=="PRO_CUCC_TWO"'>
        					<i-col :xs="5" :sm="5" :md="5" :lg="4">
	        					<Form-item label="姓名"  :label-width="40">
						            <i-input :value.sync="formItem.name" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="5" :sm="5" :md="5" :lg="4">
	        					<Form-item label="手机号码"  :label-width="80">
						            <i-input :value.sync="formItem.phone" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="5" :sm="5" :md="5" :lg="4">
	        					<Form-item label="证件号码"  :label-width="80">
						            <i-input :value.sync="formItem.cID" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="5" :sm="5" :md="5" :lg="4">
	        					<Form-item label="证件类型"  :label-width="80">
						            <i-select :model.sync="formItem.certificate" placeholder="请选择">
						                <i-option value="0101">身份证</i-option>
		                                <i-option value="0102">户口薄</i-option>
		                                <i-option value="0103">军人证</i-option>
		                                <i-option value="0104">武装警察身份证</i-option>
		                                <i-option value="0105">港澳居民来往内地通行</i-option>
		                                <i-option value="0106">台湾居民来往内地通行</i-option>
		                                <i-option value="0107">户照</i-option>
		                                <i-option value="0199">其它证件</i-option>
						            </i-select>
						        </Form-item>
						    </i-col>
						    <i-col :xs="4" :sm="4" :md="3" :lg="3">
						    	<Form-item :label-width="14">
								    <i-button type="primary">查询</i-button>
								</Form-item>
						    </i-col>
        				</Row>
        				<Row v-if='formItem.select=="PRO_CMCC_NAME"'>
        					<i-col :xs="8" :sm="8" :md="7" :lg="5">
	        					<Form-item label="姓名"  :label-width="40">
						            <i-input :value.sync="formItem.name" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="8" :sm="8" :md="7" :lg="5">
	        					<Form-item label="手机号码"  :label-width="80">
						            <i-input :value.sync="formItem.phone" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="8" :sm="8" :md="7" :lg="4">
						    	<Form-item :label-width="14">
								    <i-button  @click='query' type="primary">查询</i-button>
								</Form-item>
						    </i-col>
        				</Row>
        				<Row v-if='formItem.select=="PRO_CMCC_THREE"'>
        					<i-col :xs="7" :sm="7" :md="6" :lg="5">
	        					<Form-item label="姓名"  :label-width="40">
						            <i-input :value.sync="formItem.name" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="7" :sm="7" :md="6" :lg="5">
	        					<Form-item label="手机号码"  :label-width="80">
						            <i-input :value.sync="formItem.phone" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="7" :sm="7" :md="6" :lg="5">
	        					<Form-item label="身份证"  :label-width="80">
						            <i-input :value.sync="formItem.ID" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col :xs="3" :sm="3" :md="3" :lg="3">
						    	<Form-item :label-width="14">
								    <i-button @click='query' type="primary">查询</i-button>
								</Form-item>
						    </i-col>
        				</Row>
        				<Row>
        					<i-table :columns="columns1" :data="data1"></i-table>
        				</Row>
        				
                	</i-form>
                </div>
                </portlet>
            </i-col>
		</Row>
	</div>
</template>
<script>
	import userBar from '../finance/userBar.vue';
	import portlet from '../../components/portlet.vue';
	export default {
		components:{userBar,portlet},
		data(){
			return {
				formItem:{
					select:'PRO_CTCC_IDCARD',
					ID:'',
					phone:'',
					name:'',
					certificate:'',
					cID:''
				},
				columns1: [
                    {
                        title: '姓名',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '身份证号',
                        key: 'idnumber',
                        align: 'center'
                    },
                    {
                        title: '电话',
                        key: 'phone',
                        align: 'center'
                    },
                    {
                        title: '认证状态描述',
                        key: 'message',
                        align: 'center'
                    },
                ],
                data1:[

                ],
			}
		},
		methods:{
			query(){
				let api='';
				let option={};
				let ind='';
				switch(this.formItem.select){
			        case 'PRO_CMCC_THREE': 
			            api='100401';
			            option={
			            	apiKey:api,
			            	nameList:this.formItem.name,
			            	idCardList:this.formItem.ID,
			            	phoneList:this.formItem.phone,
			            }
			            ind='CMCC_THREE';
			            break;
			        case 'PRO_CTCC_IDCARD':
			            api='100603';
			            option={
			            	apiKey:api,
			            	idCardNumberList:this.formItem.ID,
			            	mobileList:this.formItem.phone,
			            }
			            ind='CTCC_IDCARD';
			            break;
			        case 'PRO_CTCC_THREE':
			        	api='100601';
			        	option={
			            	apiKey:api,
			            	nameList:this.formItem.name,
			            	idCardList:this.formItem.ID,
			            	phoneList:this.formItem.phone,
			            }
			            ind='CTCC_THREE';
			            break;
			        case 'PRO_CTCC_NAME':
			        	api='100602';
			        	option={
			            	apiKey:api,
			            	nameList:this.formItem.name,
			            	phoneList:this.formItem.phone,
			            }
			            ind='CTCC_NAME';
			            break;
			        case 'PRO_CUCC_TWO':
			        	api='100502';
			        	option={
			            	apiKey:api,
			            	nameList:this.formItem.name,
			            	idCardList:this.formItem.ID,
			            	phoneList:this.formItem.phone,
			            	cardTypeList:this.formItem.certificate
			            }
			            ind='CUCC_TWO';
			            break;
			        case 'PRO_CMCC_NAME':
			        	api='100402';
			        	option={
			            	apiKey:api,
			            	nameList:this.formItem.name,
			            	phoneList:this.formItem.phone,
			            }
			            ind='CMCC_NAME';
			            break;
			        default:
			        	api='100603';
			        	option={
			            	apiKey:api,
			            	idCardNumberList:this.formItem.ID,
			            	mobileList:this.formItem.phone,
			            }
			            ind='CTCC_IDCARD';
			            break;
			    }
			    this.getData(option,ind);
			},
			getData(op,ind){
				var that = this;
				this.$http.jsonp(this.path+'pageQuery/pageQueryServlet/query',{
                    params:op,
                    jsonp:'callback'
                }).then(
                    (datas)=>{
                        console.log(datas);

                        if(datas.body.errorCode=='0000'){
                            that.data1.push(datas.body.result[ind]);
                        }else{
                            this.$Message.success(datas.body.msg);
                            if(datas.body.code=='997'||datas.body.code=='998'){
                            	this.myRouter.go({path:'/login'});
                            }
                        }
                    },
                    (error)=>{
                        this.$Message.success('网络问题!');
                    }
                );
			}

		}
	}
</script>
<style type="text/css">
	.data_body{
		min-height: 400px;
	}
	.data_body_choose{
		width: 400px;
	}
</style>